﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>淘淘乐</title>
    <meta name="description" content="">
    <meta name="robots" content="noindex, follow" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- favicon
    ============================================ -->
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/images/favicon.ico}">

    <!-- Boostrap stylesheet -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">

    <!-- Icon Font CSS -->
    <link rel="stylesheet" th:href="@{/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/pe-icon-7-stroke.css}">

    <!-- Plugins stylesheet -->
    <link rel="stylesheet" th:href="@{/css/plugins.css}">

    <!-- Master stylesheet -->
    <link rel="stylesheet" th:href="@{/css/style.css}">

    <!-- Responsive stylesheet -->
    <link rel="stylesheet" th:href="@{/css/responsive.css}">

    <!-- modernizr JS
    ============================================ -->
    <script th:src="@{/js/modernizr-2.8.3.min.js}"></script>
    <script th:src="@{/js/calculater.js}"></script>

    <style>
        .bge6{
            background-color: #ec610a !important;
            color: #ffffff !important;
        }

        .w {
            width: 32px;
        }

        .tip {
            font-size: 25px;
            position: absolute;
            font-weight: bold;
            color: #717171;
            margin-top: 40px;
            margin-left: 283px;
        }

        .expire-color {
            color: #b7b7b7;
        }
    </style>

</head>

<body>

<!--[if lt IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->

<!-- Start of Whole Site Wrapper with mobile menu support -->
<div id="whole" class="whole-site-wrapper color-scheme-one">

    <!-- Start of Header -->
    <div th:include="components/header :: html"></div>
    <!-- End of Header -->

    <!-- Start of Breadcrumbs -->
    <div class="breadcrumb-section">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12">
                    <nav class="breadcrumb">
                        <a class="breadcrumb-item" th:href="@{/}">首页</a>
                        <span class="breadcrumb-item active">购物车</span>
                    </nav>
                </div>
            </div> <!-- end of row -->
        </div> <!-- end of container -->
    </div>
    <!-- End of Breadcrumbs -->

    <!-- Start of Main Content Wrapper -->
    <div id="content" class="main-content-wrapper">

        <!-- Start of Shopping Cart Wrapper -->
        <div class="shopping-cart-wrapper">
            <div class="container">
                <div class="row" >
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                        <main id="primary" class="site-main">
                            <div id="cart" style="width: 100%">
                                <div class="shopping-cart">
                                    <div class="row">
                                        <div class="col-12 col-sm-12 col-md-12 col-lg-12" th:if="${cartResultVo.list ne null}">
                                            <div class="section-title left-aligned with-border">
                                                <h2>购物车</h2>
                                            </div>

                                            <form action="#">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered">
                                                        <thead>
                                                        <tr>
                                                            <td><input type="checkbox" class="allCheck" th:value="${cartResultVo.cartTotalPrice}"></td>
                                                            <td>图片</td>
                                                            <td>商品信息</td>
                                                            <td>数量</td>
                                                            <td>单价</td>
                                                            <td>总价</td>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <!--购物车商品展示-->
                                                        <tr th:each="cartListVo:${cartResultVo.list}">
                                                            <td th:if="${cartListVo.available gt 0 && cartListVo.available ge cartListVo.productSeriesOnCartNum}"><input type="checkbox" class="childCheck" th:value="${cartListVo.productSeriesTotalPrice}" th:pid="${cartListVo.pid}" th:skuid="${cartListVo.skuid}"></td>
                                                            <td th:if="${cartListVo.available eq 0 || cartListVo.available lt cartListVo.productSeriesOnCartNum}"><span class="expire-color">失效</span></td>
                                                            <td>
                                                                <a th:href="|@{/product/toSingleProduct.do}?pid=${cartListVo.pid}|"><img th:src="|@{http://124.222.122.45/}${cartListVo.image}|" alt="Cart Product Image" title="Cas Meque Metus" class="img-thumbnail"></a>
                                                            </td>
                                                            <div th:if="${cartListVo.available gt 0 && cartListVo.available ge cartListVo.productSeriesOnCartNum}">
                                                                <td>
                                                                    <a th:if="${cartListVo.available gt 0}" th:href="|@{/product/toSingleProduct.do}?pid=${cartListVo.pid}|" th:text="|名称：${cartListVo.name}|"></a>
                                                                    <span th:text="|颜色：${cartListVo.color}|"></span>
                                                                    <span th:text="|套餐：${cartListVo.setMeal}|"></span>
                                                                </td>
                                                                <td>
                                                                    <div class="input-group btn-block n-inputNumber">
                                                                        <input type="text" min="1" name="quantity" size="1" class="n-inputNumber-input form-control addnum" th:value="${cartListVo.productSeriesOnCartNum}">
                                                                        <span class="input-group-btn">
                                                                        <button type="button"  class="n-inputNumber-l btn btn-primary pull-left w plusAndMinusBtn minusBtn" th:pid="${cartListVo.pid}" th:skuid="${cartListVo.skuid}" ><i class="fa fa-minus"></i></button>
                                                                        <button type="button"  class="n-inputNumber-r btn btn-primary w plusAndMinusBtn plusBtn" th:pid="${cartListVo.pid}" th:skuid="${cartListVo.skuid}"><i class="fa fa-plus"></i></button>
                                                                        <button type="button"  class=" btn btn-danger pull-right w removeBtn" th:pid="${cartListVo.pid}"  th:skuid="${cartListVo.skuid}"><i class="fa fa-times-circle"></i></button>
                                                                    </span>
                                                                    </div>
                                                                </td>
                                                                <td th:text="${#numbers.formatCurrency(cartListVo.singleProductPrice)}"></td>
                                                                <td style="width: 150px" th:text="${#numbers.formatCurrency(cartListVo.productSeriesTotalPrice)}"></td>
                                                            </div>
                                                            <div th:if="${cartListVo.available eq 0 || cartListVo.available lt cartListVo.productSeriesOnCartNum}">
                                                                <td>
                                                                    <a class="expire-color" th:href="|@{/product/toSingleProduct.do}?pid=${cartListVo.pid}|" th:text="|名称：${cartListVo.name}|"></a>
                                                                    <span class="expire-color" th:text="|颜色：${cartListVo.color}|"></span>
                                                                    <span class="expire-color" th:text="|套餐：${cartListVo.setMeal}|"></span>
                                                                </td>
                                                                <td>
                                                                    <div class="input-group btn-block">
                                                                        <input readonly type="text" name="quantity" class="n-inputNumber-input form-control addnum" th:value="${cartListVo.productSeriesOnCartNum}" style="color: #b7b7b7">
                                                                        <span class="input-group-btn">
                                                                        <button disabled style="cursor: auto" type="button"  class="expire-color btn pull-left w plusAndMinusBtn"><i class="fa fa-minus"></i></button>
                                                                        <button disabled style="cursor: auto" type="button" class="expire-color btn w"><i class="fa fa-plus"></i></button>
                                                                        <button type="button"  class=" btn btn-danger pull-right w removeBtn" th:pid="${cartListVo.pid}"  th:skuid="${cartListVo.skuid}"><i class="fa fa-times-circle"></i></button>
                                                                    </span>
                                                                    </div>
                                                                </td>
                                                                <td class="expire-color" th:text="${#numbers.formatCurrency(cartListVo.singleProductPrice)}"></td>
                                                                <td style="width: 150px;" class="expire-color" th:text="${#numbers.formatCurrency(cartListVo.productSeriesTotalPrice)}"></td>
                                                            </div>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </form>

                                            <div class="cart-amount-wrapper">
                                                <div class="row">
                                                    <div class="col-12 col-sm-12 col-md-4 offset-md-8">
                                                        <table class="table table-bordered">
                                                            <tbody>
                                                            <tr>
                                                                <td><strong>合计:</strong></td>
                                                                <td><span class="primary-color" th:text="${#numbers.formatCurrency(0)}" id="totalPrice"></span></td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="cart-button-wrapper d-flex justify-content-between mt-4">
                                                <a th:href="@{/product/queryProductListBySplitPage.do}" class="btn btn-secondary">继续购物</a>
                                                <a id="checkOutBtn" class="btn bge6 btn-secondary align-self-end">结算</a>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-12 col-md-12 col-lg-12" th:if="${cartResultVo.list eq null}" style="text-align: center;">
                                            <span class="tip">购物车空空如也，快去添加一些商品吧</span>
                                            <img th:src="@{/images/empty-cart.gif}" style="width: 60%;"/>
                                        </div>

                                        <!-- Start of Related Products -->
<!--                                            <section class="related-products mt-5">-->
<!--                                                <div class="container">-->
<!--                                                    <div class="row">-->
<!--                                                        <div class="col-12 col-sm-12 col-md-12">-->
<!--                                                            <div class="section-title left-aligned with-border">-->
<!--                                                                <h2>Related Products</h2>-->
<!--                                                            </div>-->
<!--                                                            <div class="latest-product-wrapper pos-r">-->
<!--                                                                <div class="product-carousel" data-visible-slide="4" data-visible-lg-slide="4" data-visible-md-slide="3" data-visible-sm-slide="2" data-loop="true" data-speed="1000">-->

<!--                                                                    &lt;!&ndash; Slides &ndash;&gt;-->
<!--                                                                    <div class="swiper-wrapper">-->
<!--                                                                        <div class="swiper-slide product-layout product-grid">-->
<!--                                                                            <div class="product-thumb">-->
<!--                                                                                <div class="product-inner">-->
<!--                                                                                    <div class="product-image">-->
<!--                                                                                        <a href="single-product.html">-->
<!--                                                                                            <img th:src="@{/images/products/deals/product-1-2.jpg}" alt="Proin Lectus Ipsum" class="hover-image">-->
<!--                                                                                            <img th:src="@{/images/products/deals/product-1-1.jpg}" alt="Proin Lectus Ipsum" title="Proin Lectus Ipsum">-->
<!--                                                                                        </a>-->
<!--                                                                                    </div> &lt;!&ndash; end of product-image &ndash;&gt;-->

<!--                                                                                    <div class="product-caption">-->
<!--                                                                                        <div class="product-ratings">-->
<!--                                                                                            <div class="rating-box">-->
<!--                                                                                                <ul class="rating d-flex">-->
<!--                                                                                                    <li><i class="fa fa-star"></i></li>-->
<!--                                                                                                    <li><i class="fa fa-star"></i></li>-->
<!--                                                                                                    <li><i class="fa fa-star"></i></li>-->
<!--                                                                                                    <li><i class="fa fa-star"></i></li>-->
<!--                                                                                                    <li><i class="fa fa-star"></i></li>-->
<!--                                                                                                </ul>-->
<!--                                                                                            </div>-->
<!--                                                                                        </div>-->
<!--                                                                                        <h4 class="product-name"><a href="single-product.html">Donec Non Est</a></h4>-->
<!--                                                                                        <p class="product-price">-->
<!--                                                                                            <span class="price-new">$280.00</span>-->
<!--                                                                                        </p>-->
<!--                                                                                    </div>&lt;!&ndash; end of product-caption &ndash;&gt;-->
<!--                                                                                </div>&lt;!&ndash; end of product-inner &ndash;&gt;-->
<!--                                                                            </div>&lt;!&ndash; end of product-thumb &ndash;&gt;-->
<!--                                                                        </div> &lt;!&ndash; end of product-layout &ndash;&gt;-->

<!--                                                                    </div> &lt;!&ndash; end of swiper-wrapper &ndash;&gt;-->

<!--                                                                    &lt;!&ndash; Navigation &ndash;&gt;-->
<!--                                                                    <div class="swiper-arrow next"><i class="fa fa-angle-right arrow"></i></div>-->
<!--                                                                    <div class="swiper-arrow prev"><i class="fa fa-angle-left arrow"></i></div>-->
<!--                                                                </div> &lt;!&ndash; end of product-carousel &ndash;&gt;-->
<!--                                                            </div> &lt;!&ndash; end of latest-product-wrapper &ndash;&gt;-->
<!--                                                        </div>-->
<!--                                                    </div> &lt;!&ndash; end of row &ndash;&gt;-->
<!--                                                </div> &lt;!&ndash; end of container &ndash;&gt;-->
<!--                                            </section>-->
                                        <!-- End of Related Products -->
                                    </div>
                                </div> <!-- end of shopping-cart -->
                            </div>
                        </main> <!-- end of #primary -->
                    </div>
                </div> <!-- end of row -->
            </div> <!-- end of container -->
        </div>
        <!-- End of Shopping Cart Wrapper -->
    </div>
    <!-- End of Main Content Wrapper -->

    <!-- 提示对话框 -->
    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="myModal" style="margin-top: 300px;">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content" style="width: 350px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 290px"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body" style="text-align: center;">
                    <span id="dialog-info" style="font-size: 17px;color: #646464;"></span>
                </div>
                <div class="modal-footer" style="padding: 10px 15px;">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" style="height: 40px;background-color: #f26307;width: 100px;border-color: #FFFFFF;border-radius: 0.7rem;">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Start of Footer -->
    <div th:include="components/footer :: html"></div>
    <!-- End of Footer -->

    <!-- Start of Scroll to Top -->
    <div id="to_top">
        <i class="ion ion-ios-arrow-forward"></i>
        <i class="ion ion-ios-arrow-forward"></i>
    </div>
    <!-- End of Scroll to Top -->
</div>
<!-- End of Whole Site Wrapper -->

<!-- jQuery JS -->
<script th:src="@{/js/jquery.1.12.4.min.js}"></script>

<!-- Popper JS -->
<script th:src="@{/js/popper.min.js}"></script>

<!-- Bootstrap JS -->
<script th:src="@{/js/bootstrap.min.js}"></script>

<!-- Plugins JS -->
<script th:src="@{/js/plugins.js}"></script>

<!-- Main JS -->
<script th:src="@{/js/main.js}"></script>

<script th:inline="javascript">
    $(".allCheck").prop('checked', false);
    $(".childCheck").prop('checked', false);

    let temp = 0;
    let totalPrice = $("#totalPrice");

    // 全选
    $(".allCheck").click(function () {
        checkAll(this);
    })

    function checkAll(t) {
        if ($(".allCheck").prop('checked')) {
            $(".childCheck").prop('checked', true);
            temp = parseFloat($(t).val()).toFixed(2);
            totalPrice.text("¥ " + temp);
        } else {
            $(".childCheck").prop('checked', false);
        }
        if ($(".childCheck:checked").size() === 0) {
            totalPrice.text("¥ " + parseFloat("0").toFixed(2));
            temp = 0;
        }
    }

    //单选
    $(".childCheck").click(function () {
        checkChild(this);
    })

    function checkChild(t) {
        if ($(".childCheck").size() === $(".childCheck:checked").size()) {
            $(".allCheck").prop('checked', true);
        } else {
            $(".allCheck").prop('checked', false);
        }

        //合计价格
        if ($(t).prop('checked')) {
            temp += parseFloat($(t).val());
        } else if (temp !== 0) {
            temp -= parseFloat($(t).val());

        }
        totalPrice.text("¥ " + temp.toFixed(2));
    }

    //增加商品价格
    $(".plusBtn").on('click', function () {
        plusNum(this);
    })

    function plusNum(t) {
        let pid = $(t).attr('pid');
        let productNum = parseInt($(t).parent().prev().val()) + 1;
        let skuid = $(t).attr("skuid");
        update(pid, productNum, skuid);
    }

    //减少商品价格
    $(".minusBtn").on('click', function () {
        minusNum(this);
    })

    function minusNum(t) {
        let pid = $(t).attr('pid');
        let productNum = parseInt($(t).parent().prev().val()) - 1;
        if (parseInt($(t).parent().prev().val()) === 1) {
            return false;
        }
        let skuid = $(t).attr("skuid");
        update(pid, productNum, skuid);
    }

    function update(pid, productNum, skuid) {
        $.ajax({
            url: "/admin/editCart.do",
            data: {
                pid:pid,
                productNum:productNum,
                skuid:skuid
            },
            type: "post",
            dataType: "json",
            success: function (data) {
                if (data.flag === true) {
                    reloadCart();
                    // location.href = "http://localhost:8081/admin/queryCart.do";
                } else {
                    $("#dialog-info").text(data.message);
                    $("#myModal").modal("show");
                }
            },
            error: function () {
                $("#dialog-info").text("更新数量异常");
                $("#myModal").modal("show");
            }
        })
    }

    //删除
    $(".removeBtn").on('click', function () {
        if (confirm("确定删除此商品")) {
            remove(this);
        }
    })

    //删除函数
    function remove(object) {
        let cartRecordPid = $(object).attr("pid")
        let cartRecordSkuid = $(object).attr("skuid");
        $.ajax({
            url: "/admin/removeCart.do",
            data: {
                pid:cartRecordPid,
                skuid:cartRecordSkuid
            },
            type: "post",
            dataType: "json",
            success: function (data) {
                if (data.flag === true) {
                    // location.href = "http://localhost:8081/admin/queryCart.do";
                    //执行load函数局部加载组件，每次加载完都要重新绑定事件
                    reloadCart();
                } else {
                    $("#dialog-info").text(data.message);
                    $("#myModal").modal("show");
                }
            },
            error: function () {
                $("#dialog-info").text("系统忙，请稍后再试");
                $("#myModal").modal("show");
            }
        })
    }

    function reloadCart() {
        $("#primary").load("http://106.75.236.113:8081/admin/queryCart.do #cart",function () {
            //初始化计算总价的变量
            totalPrice = $("#totalPrice");
            temp = 0;
            //绑定复选框的事件
            $(".allCheck").on('click', function () {
                checkAll(this);
            })
            $(".childCheck").on('click', function () {
                checkChild(this);
            })
            //绑定增减事件
            $(".plusBtn").on('click', function () {
                plusNum(this);
            })
            $(".minusBtn").on('click', function () {
                minusNum(this);
            })
            // 绑定点击事件调用删除函数
            $(".removeBtn").on('click', function () {
                if (confirm("确定删除此商品")) {
                    remove(this);
                }
            })
            // 绑定点击事件调用绑定事件监听来增减数值
            $(".plusAndMinusBtn").on('click', function () {

            });
            //重新绑定生成订单事件
            $("#checkOutBtn").on('click', function () {
                checkOut();
            })
        });
    }

    $("#checkOutBtn").on('click', function () {
        checkOut();
    })

    function checkOut() {
        let cks = $(".childCheck:checked");
        let totalAmount = totalPrice.text().substring(1);
        let skuidStr = "";

        $.each(cks, function () {
            let skuid = $(this).attr("skuid");
            if (skuid != null) {
                skuidStr += "&skuid=" + skuid;
            }
        })

        if (skuidStr === "") {
            $("#dialog-info").text("请选择要提交的商品");
            $("#myModal").modal("show");
            return false;
        }

        location.href = "/admin/generateTempOrder.do?totalAmount=" + totalAmount + skuidStr;
    }
</script>

</body>
</html>